<template>
  <div>
    <div style="padding: 50px">
      <el-form label-width="100px">
        <el-form-item label="优惠卷名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="使用范围">
          <el-radio v-model="form.dis_type" label="1">课程</el-radio>
          <el-radio v-model="form.dis_type" label="2">图书</el-radio>
        </el-form-item>
        <el-form-item>
          <el-radio v-model="form.scope_type" label="1"
            >全部{{ form.dis_type == 1 ? "课程" : "图书" }}</el-radio
          >
          <el-radio v-model="form.scope_type" label="2">指定分类</el-radio>
          <el-radio v-model="form.scope_type" label="3"
            >指定{{ form.dis_type == 1 ? "课程" : "图书" }}</el-radio
          >
        </el-form-item>
        <el-form-item>
          <!-- 循环列出从子组件中勾选的数据 -->
          <el-tag v-for="v in form.commodity_id" :key="v.id" closable>
            {{ v.name }}
          </el-tag>

          <Book
            @ok="getOk"
            v-if="form.dis_type == 2 && form.scope_type == 3"
          ></Book>
          <BookCate
            v-if="form.dis_type == 2 && form.scope_type == 2"
          ></BookCate>
          <Course
            @courseOk="courseOk"
            v-if="form.dis_type == 1 && form.scope_type == 3"
          ></Course>
          <CourseCate
            @ok="courseCateOk"
            v-if="form.dis_type == 1 && form.scope_type == 2"
          ></CourseCate>
        </el-form-item>
        <el-form-item label="类型">
          <el-radio v-model="form.receive_type" label="1">领取</el-radio>
          <el-radio v-model="form.receive_type" label="2">赠送</el-radio>
        </el-form-item>
        <el-form-item label="优惠规则">
          满 <el-input v-model="form.full_reduction"></el-input> 减
          <el-input v-model="form.discounted_price"></el-input>
        </el-form-item>
        <el-form-item label="有效日期">
          <el-radio v-model="form.valid_type" label="1">固定天数</el-radio>
          <el-radio v-model="form.valid_type" label="2">固定时间段</el-radio>
        </el-form-item>
        <el-form-item v-if="form.valid_type != ''">
          <el-input
            v-if="form.valid_type == 1"
            v-model="form.valid_day"
          ></el-input>
          <el-date-picker
            v-if="form.valid_type == 2"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            v-model="rawDate"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="发放数量">
          <el-input-number
            controls-position="right"
            :min="1"
            :max="100000"
            v-model="form.num"
          ></el-input-number>
          请输入发放数量，1-100000之间的整数
        </el-form-item>
        <el-form-item label="每人限领">
          <el-input-number
            controls-position="right"
            :min="1"
            v-model="form.restrict_num"
          ></el-input-number
          >张
        </el-form-item>
      </el-form>
      <el-button @click="submit(0)">保存并返回</el-button>
      <el-button @click="submit(1)">保存并发放</el-button>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import Book from './coupon-edit/Book'
import BookCate from './coupon-edit/BookCate'
import Course from './coupon-edit/Course'
import CourseCate from './coupon-edit/CourseCate'
export default {
  components: {
    Book,
    BookCate,
    Course,
    CourseCate
  },
  data() {
    return {
      rawDate: [], // 选择的日期
      form: {
        commodity_id: [], // 子组件中勾选 的项
        dis_type: '1', // 1. 班课  2：图片
        grant: '0', // 0：保存并返回 1：保存并发放
        receive_type: '1', // 1:领取 2：赠送
        restrict_num: 1, // 每人限领
        scope_type: '1', // 1. 全部 2.指定分类  3. 指定某几个
        valid_type: '', // 1.固定天数  2：固定日期
        valid_day: '', // 固定天数时的有效天数
        valid_start: '', // 固定日期时开始的日期
        valid_end: '', // 固定日期时结束的日期
        discounted_price: '', // 减多少
        full_reduction: '', // —》 满多少
        name: '', // 优惠卷名称
        num: 1 // 发放数量
      }
    }
  },
  watch: {
    // 监听 form 中的 dis_type
    'form.dis_type': function (newVal) {
      this.form.commodity_id = []
    },
    // 监听 form 中的 scope_type
    'form.scope_type': function (newVal) {
      this.form.commodity_id = []
    }
  },
  methods: {
    // 接收课程列表
    courseOk(data) {
      this.form.commodity_id = data
    },
    // 接收课程分类的数据
    courseCateOk(data) {
      this.form.commodity_id = data
    },
    submit(grant) {
      // 设置提交的类型
      this.form.grant = grant

      this.form.valid_start = this.rawDate[0]
      this.form.valid_end = this.rawDate[1]
      // 提交
      axios.post('/coupon', this.form).then((res) => {
        if (res) {
          this.$message.success('操作成功')
          this.$router.push({ name: 'MarketCouponManage' })
        }
      })
    },
    // 接收子传过来的数据
    getOk(data) {
      // 把子组件传过来的放到框中
      this.form.name = data
    }
  }
}
</script>
<style scoped>
</style>
